import React from "react";
import {designProPage} from "../designProPage";
import {NavServiceType} from "plain-micro-application";
import {PlButton, useDialog} from "plain-design";
import {useGetRouteParams} from "./useGetRouteParams";

/**
 * 定义 home 路由：nav.micro.route({title: '测试home路由', type: NavigatorRouteType.home, path: 'test/test-home-route', route: 'test-home/:id/:code',})
 * 访问 home 路由：http://localhost:3120/home/test-home/111/222
 * 定义home路由的时候，path: 的前缀得注册能够被 module application 处理；
 *
 * @author  韦胜健
 * @date    2021/9/4 20:19
 */
export default designProPage((props) => {
    console.log(props)

    const $dialog = useDialog()
    const params = props.page?.param || {}
    const {id, code} = params
    const {getIdAndCode} = useGetRouteParams()

    async function test() {
        const {id, code} = await getIdAndCode();
        (props.nav as NavServiceType).openWindow('test/test-page-route', {id, code})
    }

    return () => <>
        <div className="pro-page-header">
            <h1>Page路由</h1>
        </div>
        <div className="pro-page-card" style={{paddingBottom: '20px'}}>
            <ul>
                <li>路由参数：{JSON.stringify({id, code})}</li>
                <li>{`定义 home 路由：nav.micro.route({title: '测试home路由', type: NavigatorRouteType.home, path: 'test/test-home-route', route: 'test-home/:id/:code',})`}</li>
                <li>{`定义home路由的时候，path: 的前缀得注册能够被 module application 处理；`}</li>
            </ul>
        </div>
        <div className="pro-page-card" style={{paddingBottom: '20px'}}>
            <ul>
                <PlButton onClick={test}>测试跳转</PlButton>
            </ul>
        </div>
    </>
})